<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<% String path = request.getContextPath();%>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="<%=path%>/static/layui/css/layui.css">
    <script src="<%=path%>/static/layui/layui.js"></script>
    <script src="<%=path%>/static/js/jquery-3.5.1.min.js"></script>
    <style>
        .console{
            margin-top: 15px;
            margin-left: 18px;
        }
        .rbtn,.ticket{
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            background-color: #009688;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            margin-left: 15px;
        }
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
            top: 50%;
            transform: translateY(-50%);
        }
        .layui-table th,.layui-table td{
            /*表头内容居中显示*/
            text-align: center;
        }
    </style>
</head>
<body>

<div class="console">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" name="name" placeholder="输入姓名" autocomplete="off" class="layui-input name">
            </div>
            <button class="layui-btn search"  lay-filter="formDemo">检索</button>
            <button class="ticket">订酒店</button>
            <button class="rbtn">刷新</button>

            <div class="layui-input-inline">
                <select name="booking" class="pid" id="provid" lay-filter="booking">
                    <option value=""></option>
                    <option value="1">已订酒店</option>
                    <option value="0">未订酒店</option>
                </select>
            </div>
        </div>
    </form>
</div>

<table class="layui-hide" id="test" lay-data="{id:'tables'}" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">删除选中</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <%--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>--%>
</script>
<script>
    $(function () {
        //刷新iframe 绑定
        $(".rbtn").on("click", function () {
            location.reload();
        });
        $(".ticket").on("click", function () {
            window.open("https://hotel.qunar.com/");
        });

    })
</script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    var layer = window.top.layer;
    //加载模块,暴露到外部
    layui.use(['table','form'], function() {
        var table = layui.table;
        var form = layui.form;
        var hotel;
        var name;
        //刷新
        function fresh(){
            name = $(".layui-input").val();
            //渲染
            table.render({
                elem: '#test'
                , url: '<%=path%>/logistics/stayLists'
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                ,where:{name:name,hotel: hotel}
                , title: '用户数据表'
                , cols: [[
                    {
                        field: 'id', title: 'ID',templet:function (supplierTravel) {
                            return supplierTravel.supplierTravel.id;
                        }
                    }
                    , {
                        field: 'userId', title: '申请人',  algin: 'center', templet: function (supplierTravel) {
                            if(supplierTravel.supplierTravel.systemUser.name==null){
                                return "";
                            }else{
                                return supplierTravel.supplierTravel.systemUser.name
                            }

                        }
                    },
                    {
                        field: 'auditUser', title: '审批人',  algin: 'center',templet:function (supplierTravel) {
                            if(supplierTravel.supplierTravel.auditUser==null){
                                return "";
                            }else {
                                return supplierTravel.supplierTravel.auditUser;
                            }
                        }
                    },
                    {
                        field: 'travelPlan', title: '行程计划',  algin: 'center',templet:function (supplierTravel) {
                            return supplierTravel.supplierTravel.travelPlan;
                        }
                    }
                    , {
                        field: 'stayTime', title: '入住日期', algin: 'center',templet:function (supplierTravel) {
                            if(supplierTravel.stayTime==undefined){
                                return "";
                            }else {
                                return supplierTravel.stayTime;
                            }
                        }
                    },

                    {
                        field: 'departProvince', title: '离店日期', algin: 'center',templet:function (supplierTravel) {
                            if(supplierTravel.leaveTime==undefined){
                                return "";
                            }
                            return supplierTravel.leaveTime;
                        }
                    }
                    , {field: 'hotelName', title: '酒店名称', algin: 'center'}
                    , {field: 'hotelPlace', title: '酒店位置',  algin: 'center'}
                    , {field: 'remarks', title: '备注',  algin: 'center'}
                    , {field: 'price', title: '总费用', algin: 'center'}
                    , {field: 'inputUser', title: '记录人'}
                    , {toolbar: '#barDemo', title: '操作',  algin: 'center'}
                ]]
                , page: {
                    curr:1,
                    count:10
                },
                limit: 10,
                loading:true,
                parseData: function(res) { //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.list //解析数据列表
                    };
                },
                limits: [10,20,30,40,50]
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                var $ = layui.$;
                if(obj.event === 'edit'){
                    layer.open({
                        type: 2,
                        title: '出差预定酒店管理',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['55%', '90%'],
                        shadeClose: false,
                        content: '<%=path%>/logistics/updateStayList?id='+data.supplierTravel.id //iframe的url
                    });
                }
            });
        }

        fresh();
        //表格下拉监听
        form.on("select",function (data) {
            hotel = data.value;
            $(".name").val("");
            if(hotel==""){
                return;
            }
            fresh();
        });
        //搜索监听
        $(".search").on('click',function () {
            $(".layui-unselect").val("");
            fresh();
            return false;
        })
    });
</script>
</body>
</html>